<template>
  <div>
    <x-header>设置</x-header>
    <group label-width="5em" class="setting">
      <div class="photo">
        <div class="label">头像</div>
        <div class="img" @click="upload">
          <img src="assets/vux_logo.png" alt="">
          <span>></span>
          <input type="file" id='file' accept="image/*" @change="uploadImg" style="opacity: 0;position:absolute;">
        </div>
      </div>
      <cell title="手机号码" is-link @click.native="changePhone">{{phone}}</cell>
      <cell class="address" link='/receivingAddress' primary="content" @cell-font-size="12" align-items="flex-start" title="收货地址">
        <span class="detail">{{address}}</span>
      </cell>
      <!-- <x-address title="收货地区" v-model="address" placeholder="请选择地区" :list="addressData" :show.sync="showAddress"></x-address>
      <x-textarea title='详细地址' v-model='detail' placeholder="请输入详细地址"></x-textarea> -->
    </group>
    <div v-transfer-dom>
      <confirm v-model="show" show-input ref="inputPhone" title="手机号码" @on-confirm="onConfirm" @on-show='onshow'></confirm>
    </div>
  </div>
</template>

<script>
import { ChinaAddressV4Data } from 'vux';
export default {
  data() {
    return {
      show: false,
      address: '湖南省长沙市芙蓉区车站北路证券大厦4楼方正证券',   //收货地址
      // address: [],   //收货区域
      phone: '13411111111',
      // detail: '',
      addressData: ChinaAddressV4Data,
      showAddress: false
    }
  },
  methods: {
    //点击触发上传 打开上传文件夹
    upload() {
      document.getElementById('file').click();
    },
    //上传图片
    uploadImg(e) {
      console.log(e.target.files[0])
    },
    //修改手机号码
    changePhone() {
      this.show = true;
    },
    //模态框显示
    onshow() {
      this.$refs.inputPhone.setInputValue(this.phone);
    },
    //模态框确认
    onConfirm(val) {
      this.phone = val;
    }
  }
}
</script>

<style lang="less" scoped>
.photo {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  position: relative;
  .label {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .img {
    width: 50%;
    padding-right: 13px;
    position: relative;
    text-align: right;
    color: #999999;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
}

.setting {
  .address {
    .detail {
      font-size: 14px;
      padding-left: 15px;
    }
  }
}
</style>
